<template>
	<view class="containerBg" style="overflow: hidden;">
		
		
		<view class="peope" v-if="user">
			<image style="width:100rpx;height:100rpx;" src="@/static/images/header.png"></image>
			{{user.name}}
			<view class="chag" v-if="myRelationList.length >1" @click="myRelationShow=true">切换</view>
		</view>
		
		<view class="deviceInfo">
			<view class="devive1">
				<view class="deviceNickName">
					<image class="img" mode="heightFix" src="@/static/images/icon8.png"></image>
					{{deviceInfo.deviceNickName?deviceInfo.deviceNickName:'暂无'}}
					<view class="chag chag1" v-if="deviceList.length>1" @click="deviceShow=true">切换</view>
				</view>
				<view class="battery">
					  <view>{{deviceInfo.battery?deviceInfo.battery:0}}%</view>
					  <view class="batteryShape">
						<view class="level">
							<view class="percentage" :style="{'width':deviceInfo.battery?deviceInfo.battery:0+'%'}">
							</view>
						</view>
					  </view>
				</view>
			</view>
			
			<view class="chartsinfo">
				<view class="chartsDiv">
					<view class="chartsDivInfo">
						<view><image class="img" src="@/static/images/deticon1.png"></image></view>
						<view>{{deviceInfo.step?deviceInfo.step:0}}步</view>
					</view>
					 <chartsCirle colorInfo="#0ea26e"></chartsCirle>
				</view>
				<view class="chartsDiv">
					<view class="chartsDivInfo">
						<view><image class="img" src="@/static/images/deticon2.png"></image></view>
						<view>{{deviceInfo.score?deviceInfo.score:0}}分</view>
					</view>
					 <chartsCirle colorInfo="#ed8247"></chartsCirle>
				</view>
				
				
			</view>
			
			<view class="deviceType">
				<view class="li">
					<view class="liInfo" v-if="deviceInfo.heartRate"><text>{{deviceInfo.heartRate}}</text>次/分</view>
					<view class="liInfo" v-else>暂无</view>
					<view class="dBtn dBtn1">测量心率</view>
				</view>
				
				<view class="li">
					<view class="liInfo" v-if="deviceInfo.bloodPressureMax"><text>{{deviceInfo.bloodPressureMax+'~'+deviceInfo.bloodPressureMin}}</text>mmHg</view>
					<view class="liInfo" v-else>暂无</view>
					<view class="dBtn dBtn2">测量血压</view>
				</view>
				
				<view class="li">
					<view class="liInfo" v-if="deviceInfo.temperature"><text>{{deviceInfo.temperature}}</text>℃</view>
					<view class="liInfo" v-else>暂无</view>
					<view class="dBtn dBtn3">测量体温</view>
				</view>
			</view>
			
			
		</view>
		
		
		
		
		<view class="map">
			<!-- <view>远动轨迹</view> -->
			<view id="mapPosition" style="height:700rpx;">
				
			</view>
			<view @click="locationBtn" class="locationBtn">轨迹</view>
			<view class="mapBtnDiv">
				<view class="mapBtn" @click="elarmInfo">
					<image src="@/static/images/dic1.png"></image><view>报警信息</view>
				</view>
				<view class="mapBtn" @click="electronic">
					<image src="@/static/images/dic2.png"></image><view>电子围栏</view>
				</view>
				<view  class="mapBtn"@click="unbinding">
					<image src="@/static/images/dic3.png"></image><view>解绑设备</view>
				</view>
				<view class="mapBtn" @click="feedBack">
					<image src="@/static/images/dic4.png"></image><view>异常反馈</view>
				</view>
			</view>
		</view>
		
		<view class="date" @click="dateShow">
			<view><u-icon color="#999" name="calendar-fill" :size="22"></u-icon>{{$u.timeFormat(date, 'yyyy-mm-dd')}}</view>
			<u-icon color="#999" name="arrow-right" :size="22"></u-icon>
		</view>
		<view class="charts" v-if="heartRate">
			<view class="title">心率</view>
			
			<view class="">
				<view>
					<charts :dat1="key" column="column1" v-if="heartRate.chartData" :yAxis='heartRate.yAxis' :chartData="heartRate.chartData"></charts>
				</view>
				
			</view>
			
			<view class="heartRateInfo">
				<view class="li">
					<view>{{heartRate.result.max}}BMP</view>
					<view>最高</view>
				</view>
				<view class="li">
					<view>{{heartRate.result.avg}}BMP</view>
					<view>平均</view>
				</view>
				<view class="li">
					<view>{{heartRate.result.min}}BMP</view>
					<view>最低</view>
				</view>
			</view>
		</view>
		
		<view class="charts" v-if="bp">
			<view class="title">血压</view>
			<view>
				<charts  :dat1="key" column="column2" v-if="bp.chartData" :yAxis='bp.yAxis' :chartData="bp.chartData"></charts>
			</view>
			<view class="heartRateInfo">
				<view class="li">
					<view style="color:#111;font-size:34rpx;font-weight: bold;">{{bp.result.number}}</view>
					<view>测量次数</view>
				</view>
				<view class="li">
					<view>{{bp.result.avg}}mmHg</view>
					<view>最高</view>
				</view>
				<view class="li">
					<view>{{bp.result.min}}mmHg</view>
					<view>最低</view>
				</view>
			</view>
			
		</view>
		
	
		
		<view class="charts" v-if="temper" style="padding-bottom: 40rpx;">
			<view class="title">体温</view>
			<view>
				<charts  :dat1="key"  column="column3" v-if="temper.chartData" :yAxis='temper.yAxis' :chartData="temper.chartData"></charts>
			</view>
			<view class="heartRateInfo">
				<view class="li">
					<view>{{temper.result.max}}℃</view>
					<view>最高</view>
				</view>
				<view class="li">
					<view>{{temper.result.avg}}℃</view>
					<view>平均</view>
				</view>
				<view class="li">
					<view>{{temper.result.min}}℃</view>
					<view>最低</view>
				</view>
			</view>
		</view>
		
		
		<u-picker :show="myRelationShow" :columns="[myRelationList]" keyName="name"
		@cancel="myRelationShow=false" @confirm="myRelationConfirm"
		></u-picker>
		<u-picker :show="deviceShow" :columns="[deviceList]" keyName="deviceNickName"
		@cancel="deviceShow=false" @confirm="deviceConfirm"
		></u-picker>
		<u-datetime-picker
                :show="showTime"
                v-model="date"
                mode="date" @cancel="showTime=false" @confirm="dateConfirm"
        ></u-datetime-picker>
		<tabbar :current="current"></tabbar>
	</view>
</template>

<script>
	
	
	
	import chartsC from "@/components/chartsC.vue"
	import chartsCirle from "@/components/chartsCirle.vue"
	import charts from "@/components/charts.vue"
	export default {
		components:{
			chartsCirle,charts,chartsC
		},
		data() {
			return {
				current:1,
				key:-1,
				myRelationShow:false,
				deviceShow:false,
				bp:undefined,
				heartRate:undefined,
				temper:undefined,
				showTime:false,
				date: Number(new Date()),
				deviceId:"",
				deviceInfo:{},
				map:false,
				stepData:{},
				myRelationList:[],
				user:undefined,
				deviceList:[],
			}
		},
		onLoad(e){
			this.deviceId = e.id;
			if(e.id){
				this.getInfo().then(res=>{
					let customerInfoId = res.device.customerInfoId;
					console.log(res);
					this.getRelationList(customerInfoId,null);

				});
				this.healthList();
			}else{
				this.getRelationList("",'init').then(res=>{
					if(!this.myRelationList || this.myRelationList.length<=0){
						this.$tools.msg("没有关注用户，请选择")
						return;
					}
					if(!this.deviceList || this.deviceList.length<=0){
						this.$tools.msg("没有绑定设备，添加设备")
						return;
					}
						
					this.healthList();
					this.getInfo();
				});
			}
			// this.getInfo();
			
			
		},
		mounted(){
			
		},
		methods: {
			getInfo(){
				return new Promise((resolve, reject) => {
					this.$http.deviceDetail({id:this.deviceId}).then(res=>{
					if(res.code==0){
						this.deviceInfo=res.device;
						this.getPosition();
						this.stepData={
							series: [
							  {
								name: "正确率",
								color: "#2fc25b",
								data: 0.8
							  }
							]
						  };
						
					}
					resolve(res)
				})
			
				})
				
			},
			getRelationList(customerInfoId,sign){
				return new Promise((resolve, reject) => {
				this.$http.myRelation().then(res=>{
					if(res.code==0){
						this.myRelationList = res.list;
						for(let i in this.myRelationList){
							if(this.myRelationList[i].id==customerInfoId){
								this.user = this.myRelationList[i]
							}
						}
						
						if(!this.myRelationList || this.myRelationList.length<=0){
							this.$tools.msg("没有添加关联人。请先添加")
							return;
						}
						if(!this.user){
							this.user = this.myRelationList[0]
						}
						this.getUserDevice(this.user.id,sign).then(res1=>{
						
							resolve(res)
						})
						
						console.log(this.myRelationList)
					}
					
					})
				})
			},
			getUserDevice(userId,sign){
				return new Promise((resolve, reject) => {
					this.$http.deviceList({infoId:userId}).then(res=>{
						if(res.code==0){
							this.deviceList = res.detail.list;
							if(this.deviceList.length>0){
								this.deviceId=this.deviceList[0].id
							}
						}
						resolve(res)
					})
				})
				
			},
			deviceConfirm(e){
				let device = e.value[0];
				this.deviceId = device.id;
				this.getInfo();
				this.healthList();
				this.deviceShow=false;
			},
			
			electronic(){
				uni.navigateTo({
					url:`/pages/deviceDetail/deviceFence?imei=${this.deviceInfo.deviceImei}&id=${this.deviceId}`
				})
			},
			locationBtn(){
				uni.navigateTo({
					url:`/pages/deviceDetail/location?id=${this.deviceId}&date=${this.date}`
				})
			},
			dateConfirm(e){
				console.log(e)
				this.date = e.value;
				this.showTime=false;
				this.healthList();
			},
			dateShow(){
				this.showTime=true;
			},
			healthList(){
				uni.showLoading({
					title:"加载中..."
				})
				let day = this.$u.timeFormat(this.date, 'yyyy-mm-dd')
				this.$http.healthList({id:this.deviceId,day:day}).then(res=>{
					uni.hideLoading();
					if(res.code==0){
						this.bp=res.bp;
						this.heartRate=res.heartRate;
						this.temper=res.temper;
						this.getchartsbp();
						this.getchartsHeartRate();
						this.getchartstemper();
						this.key = Date.parse(new Date()) 
						console.log(this.key)
						
					}
				})
			},
			elarmInfo(){
				uni.navigateTo({
					url:`/pages/alarm/alarm?id=${this.deviceInfo.deviceImei}`
				})
			},
			myRelationConfirm(e){
				let user = e.value[0];
				this.getUserDevice(user.id).then(res=>{
					if(this.deviceList.length<=0){
						this.$tools.msg("该用户没有绑定设备")
					}else{
						this.user = user;
					}
					
				})
				this.myRelationShow=false;
			},
			getchartstemper(){
				let res1 = {
				    categories: [],
				    series: []
				  };
				
				let bp1 = [],bp2=[];
				for(let i in this.temper.list){
					let dat = this.temper.list[i];
					res1.categories.push("");
					let ma1 = bp1[bp1.length-1];
					let max = dat.temperature?dat.temperature:ma1;
					bp1.push(max);
				}
				res1.series=[
					{ name: "体温",data: bp1},
				]
				let yAxis={
						  gridType: "dash",
						  dashLength: 2,
						  min:30,
						  max:45
						}
						
				
				this.temper.chartData=res1;
				this.temper.yAxis=yAxis;
			},
			getchartsHeartRate(){
				let res1 = {
				    categories: [],
				    series: []
				  };
				
				let bp1 = [],bp2=[];
				for(let i in this.heartRate.list){
					let dat = this.heartRate.list[i];
					res1.categories.push("");
					let ma1 = bp1[bp1.length-1];
					let max = dat.heart_rate?dat.heart_rate:ma1;
					bp1.push(max);
				}
				res1.series=[
					{ name: "心率",data: bp1},
				]
				let yAxis={
						  gridType: "dash",
						  dashLength: 2,
						  min:0,
						  max:200
						}
						
				this.heartRate.yAxis=yAxis;
				this.heartRate.chartData=res1;
			},
			getchartsbp(){
				let res1 = {
				    categories: [],
				    series: []
				  };
				
				let bp1 = [],bp2=[];
				for(let i in this.bp.list){
					let dat = this.bp.list[i];
					res1.categories.push("");
					let ma1 = bp1[bp1.length-1];
					let max = dat.blood_pressure_max?dat.blood_pressure_max:ma1;
					let min = dat.blood_pressure_min?dat.blood_pressure_min:bp2[bp2.length-1];
					bp1.push(max);
					bp2.push(min);
				}
				res1.series=[
					{ name: "高压",data: bp1},
					{ name: "低压", data: bp2}
				]
				let yAxis={
						  gridType: "dash",
						  dashLength: 2,
						  min:0,
						  max:160
						}
				this.bp.chartData=res1;
				this.bp.yAxis=yAxis;
			},
			unbinding(){//解除绑定
				uni.showModal({
					title: '提示',
					content: '确定解除绑定'+this.deviceInfo.deviceNickName+'？',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#f55850',
					cancelColor: '#39B54A',
					success: (res) => {
					if(res.confirm) {  
						this.$http.cancelBindDevice({id:this.deviceInfo.id}).then(res=>{
							if(res.code==0){
								this.$tools.msg("取消成功");
								setTimeout(res=>{
									uni.navigateTo({
										url:`/pages/userInfo/userInfo?id=${this.deviceInfo.customerInfoId}`
									})
								},2000)
							}else{
								this.$tools.msg(this.$msg.getMsgCN(res.msg));
							}
						})
						
					} else {  
						console.log('cancel') //点击取消之后执行的代码
					}  
					} 
				})
			},
			feedBack(){
				uni.navigateTo({
					url: `/pages/deviceDetail/deviceFeedback?id=${this.deviceId}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			
			getPosition(){
				
				let bmap = new BMapGL.Map("mapPosition");
				console.log(bmap, 'this.map ')
				let point = new BMapGL.Point(this.deviceInfo.longitude, this.deviceInfo.latitude);
				bmap.centerAndZoom(point, 15); //设置缩放级别		
				bmap.enableScrollWheelZoom();
				
				var marker =new BMapGL.Marker(point)
				bmap.addOverlay(marker)
				
			},
			changDevice(){
				
				
				
			}
			
		}
	}
</script>

<style scoped>
	
	.map{
		position: relative;
		background:#fff;
	}
	.map .mapBtnDiv{
		position:absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		bottom:20rpx;
		z-index:10;
	}
	.map .locationBtn{
		width:100rpx;
		height:100rpx;
		border-radius: 100rpx;
		box-shadow: #0ea26e;
		color:#0ea26e;
		font-weight: bold;
		font-size:28rpx;
		position: absolute;
		right:10rpx;
		top:10rpx;
		background: #fff;
		z-index:999;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 4rpx 4rpx 4rpx #999;
	}
	.map .mapBtn{
		width:25%;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		box-shadow: ;
	}
	.map .mapBtn image{
		width:140rpx;
		height:140rpx;
		border-radius: 140rpx;
	}

	.containerBg{background:url(@/static/images/userbg.png) no-repeat ;
		background-size:100% auto;
		padding-bottom: 30rpx;
	
	}
	.deviceInfo{
		overflow: hidden;
		margin:30rpx 30rpx 40rpx 30rpx;
		background:#fff;
		color:#b5b6a1;
		padding:30rpx;
		border-radius: 20rpx;
		
	}
	.deviceInfo .img{
		height:30rpx;
		margin-right: 10rpx;
	}
	.deviceInfo .deviceNickName{
		display: flex;
		align-items: center;
	}
	.deviceInfo .devive1{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.deviceInfo .deviceType{
		display: flex;
		align-items: center;
	}
	.deviceInfo .deviceType .li{
		width:31%;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
	}
	.deviceInfo .deviceType .li:nth-child(2){
		width:38%;
	}
	.deviceInfo .deviceType .liInfo{
		padding-top:20rpx;
	}
	.deviceInfo .deviceType .liInfo text{
		color:#111;
		padding-right: 6rpx;
	}
	.deviceInfo .deviceType .li::before{
		width:1rpx;
		background:#dcdcdc;
		height:60rpx;
		position: absolute;
		right:0;
		top:6rpx;
		content:"";
	}
	.deviceInfo .deviceType .li:last-child::before{
		display: none;
	}
	.deviceInfo .deviceType .dBtn{
		
		margin-top:20rpx;
		color:#fff;
		height:50rpx;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		padding:0 20rpx;
	}
	.deviceInfo .deviceType .dBtn1{
		background:#0ea26e;
	}
	.deviceInfo .deviceType .dBtn2{
		background:#ec7f42;
	}
	.deviceInfo .deviceType .dBtn3{
		background:#1b89f6;
	}
	
	.date{
		margin:0 30rpx;
		display: flex;
		align-items: center;
		padding:0 10rpx 0 20rpx;
		background:#fff;
		border-radius: 20rpx;
		height:80rpx;
		color:#999;
		margin-top:30rpx;
		font-size:30rpx;
		justify-content: space-between;
	}
	.date view{
		display: flex;
		align-items: center;
	}
	
	
	
	.batteryShape{
	    position: relative;
	    width: 40rpx;
	    height: 20rpx;
	    margin: 0 0 0 10rpx;
	    border: 3rpx solid #0ea26e;
	    border-radius: 5rpx;
	}
	.batteryShape::before{
	    content: '';
	    position: absolute;
	    top: 50%;
	    right: -5rpx;
	    margin-left: 2rpx;
	    transform: translateY(-50%);
	    width: 2rpx;
	    height: 8rpx;
	    background: #0ea26e;
	    border-top-right-radius: 2rpx;
	    border-bottom-right-radius: 2rpx;
	}
	.batteryShape::after{
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 50%;
	    background: rgba(255,255,255,.1);
	}
	.level{
	    position: absolute;
	    top: 4rpx;
	    right: 4rpx;
	    bottom: 4rpx;
	    left: 4rpx;
	    border-radius: 4rpx;
	    overflow: hidden;
	}
	.percentage{
	    position: absolute;
	    top: 0;
	    left: 0;
	    height: 100%;
	    width: 10%;
		background: linear-gradient(90deg,#2aac7e,#63ce91);
	}
	.battery{
		display: flex;align-items: center;
		/* color: #0ea26e; */
	}
	
	.charts{
		margin:0 30rpx 30rpx 30rpx;
		padding-bottom:30rpx;
		border-bottom:1px solid #dcdcdc;
	}
	.charts .title{
		position: relative;
		font-weight: bold;
		font-size:30rpx;
		padding-left:20rpx;
		margin-top:30rpx;
	}
	.charts .title::before{
		width:8rpx;
		height:30rpx;
		background-color: #0ea26e;
		content: "";
		position: absolute;
		top:50%;
		left:0;
		border-radius: 8rpx;
		transform: translateY(-50%);
	}
	
	.heartRateInfo{
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
	}
	.heartRateInfo .li{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width:33.333%;
		color:#999;
		font-size:28rpx;
		position: relative;
	}
	.heartRateInfo .li::before{
		width:2rpx;
		background:#dcdcdc;
		height:100%;
		right:0;
		content:'';
		position: absolute;
	}
	.heartRateInfo .li:last-child:before{
		display: none;
	}
	.chartsinfo{
		display: flex;
	}
	.chartsinfo .chartsDiv{
		width:50%;
		position: relative;
	}
	.chartsinfo .chartsDiv .chartsDivInfo{
		position: absolute;
		z-index: 100;
		top:50%;
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 100%;
		transform: translateY(-50%);
		font-size:28prx;
		
	}
	.chartsinfo .chartsDiv .chartsDivInfo .img{
		width:50rpx;
		height:50rpx;
		margin-bottom:40rpx;
	}
	.peope{
		padding:30rpx;
		padding-bottom: 0;
		display: flex;
		align-items: center;
		color:#fff;
		font-size:30rpx;
	}
	.peope image{
		margin-right:10rpx;
	}
	.peope view{
		padding:0 20rpx;
		
	}
	.chag{
		background:#fff;
		border-radius: 30rpx;
		color:#0da16d;
		margin-left:15rpx;
	}
	.chag1{
		background:#0da16d;
		color:#fff;
		padding: 0 15rpx;
	}
	
</style>
